<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>refs</title>
  </head>

  <body>
    <!--  -->
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <div id="test2"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <!-- <script src="./change_weather.js"></script> -->
  </body>
  <script src="./js/prop-types.js"></script>
  <script type="text/babel">
    class Login extends React.Component {
      state = {
        username: "",
        password: "",
      };
      handle_submit = (e) => {
        //   我的写法
        e.preventDefault();
        /* alert(
          `你的用户名是${this.state.username},密码是${this.state.password}`
        ); */
        // 张天禹的写法
        const {username,password}=this.state
        alert(
          `你的用户名是${username},密码是${password}`
        );
      };
      save_formdata = (e, dataType) => {
        console.log(e.target, dataType);
        this.setState({
          [dataType]: e.target.value,
        });
      };
      //   如果调换参数的顺序呢?实验后，也可以
      /* save_formdata = (dataType,e) => {
        console.log(e.target,dataType);
      }; */
      render() {
        return (
          <form onSubmit={this.handle_submit}>
            用户名：
            <input
              type="text"
              name="username"
              onChange={(event) => {
                this.save_formdata(event, "username");
                // this.save_formdata("username",event);
              }}
            />
            密码：
            <input
              type="text"
              name="password"
              onChange={(event) => {
                this.save_formdata(event, "password");
              }}
            />
            <button onClick={this.handle_submit}>提交</button>
          </form>
        );
      }
    }
    ReactDOM.render(<Login />, document.getElementById("test"));
  </script>
</html>
